import styles from "../../index.module.scss";
import dayjs from "dayjs";
import ReplyList from "@/pages/Article/components/replyList";
import { useRef, useState } from "react";
import Icon from "@/components/icon";
import { ArtComment } from "@/types/data";
import { Popup } from "antd-mobile";
import { http } from "@/utils/http";
import { getArticleComments, likeComment } from "@/store/actions/article";
import { useDispatch } from "react-redux";

interface Props {
  comment: ArtComment;
  art_id: string;
}

enum CommentType {
  Article = "a",
  Comment = "c",
}

export default function Comment({ comment }: Props) {
  const dispatch = useDispatch();
  const [visibleCloseRight, setVisibleCloseRight] = useState(false);

  const onLike = async (id: string, is_liking: boolean) => {
    await dispatch(likeComment(id, is_liking) as any);
  };

  return (
    <div className={styles.item}>
      <div className={styles.commentator}>
        <div className={styles.avatar}>
          <img src={comment.aut_photo} alt="" />
          <span>{comment.aut_name}</span>
        </div>
        <div className={styles.like}>
          <span>{comment.like_count}</span>
          <Icon
            type={comment.is_liking ? "iconbtn_like_sel" : "iconbtn_like2"}
            onClick={() => onLike(comment.com_id, comment.is_liking)}
          />
        </div>
      </div>
      <div className={styles.discuss}>{comment.content}</div>
      <div className={styles.bottom}>
        <div className={styles.reply}>
          <button
            onClick={() => {
              setVisibleCloseRight(true);
            }}
          >
            {comment.reply_count}回复 &gt;
          </button>
          <span>{dayjs(comment.pubdate).format("YYYY-MM-DD")}</span>
        </div>
        <Icon type={"iconbtn_essay_close"} className={styles.close} />
      </div>
      <Popup
        bodyStyle={{ height: "100%", width: "100%" }}
        position="right"
        visible={visibleCloseRight}
        showCloseButton
        onClose={() => {
          setVisibleCloseRight(false);
        }}
      >
        <ReplyList comment={comment} />
      </Popup>
    </div>
  );
}
